<!--  -->
<template>
<div class='login'>
    <div class="header">
       
        <div class="form">
            <div class="form-item">
                <h2>欢迎注册</h2> 
            </div>
            <div class="form-item">
                <input type="text" placeholder="请设置用户名" v-model="user_name"/>
            </div>
            <div class="form-item">
                <input type="text" placeholder="请输入手机号" v-model="phone"/>
            </div>
            <div class="form-item">
                <input type="password" placeholder="请设置密码" v-model="user_password"/>
            </div>
            <div class="form-item" style="display:flex">
                <input type="text" placeholder="图片验证码" v-model="captcha" style="width:70%" />
                <img src="http://192.168.0.182:3008/api/user/captcha" @click="getCaptcha" style="height:3.6rem" ref="imgcode" alt/>
            </div>
            <div class="form-item">
                <button @click="addRequestApi">注册</button>
            </div>
        </div>
    </div>
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { adduserApi } from "@/api/index";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      num: 0,
      phone: "",
      captcha: "",
      code: "",
      user_name: "",
      user_password: "",
      timer: null,
    };
  },
  computed: {
    //验证手机号
    checkPhone() {
      return /^1[0-9][0-9]{9}$/.test(this.phone);
    },
  },
  methods: {
       getCaptcha() {
      //刷新图片验证码
      console.log(this.$refs.imgcode);
      this.$refs.imgcode.src =
        "http://192.168.0.182:3008/api/user/captcha?t=" + new Date().getTime();
    },
     async addRequestApi(){
         let result=await adduserApi("/user/adduser",{
             captcha:this.captcha,
             phone:this.phone,
             user_name:this.user_name,
             user_password:this.user_password
         },
         "post");
         console.log(result);
         if(result.status==200){
             this.$router.push("/home");
         }
     }
  },
  mounted() {
    // this.getUserList();
  },
};
</script>
<style lang="less">
.login {
  .header {
    display: flex;
    justify-content: center;
    margin-top: 3rem;
    // img {
    //   width: 10rem;
    //   height: 10rem;
    //   border-radius: 50%;
    //   border: 10px solid rgba(0, 0, 0, 0.5);
    // }
  }
  .form {
    width: 100%;
    height: 50rem;
    // background: red;
    margin-left: 2rem;
    width: calc(100% - 4rem); //减号两边必须有空格
    .form-item {
      margin: 1rem 0;
      input {
        width: 100%;
        height: 3.6rem;
        border: 1px solid #cccccc;
        text-indent: 1rem;
      }
      button {
        width: 100%;
        height: 3.6rem;
        background: #f55;
        color: #fff;
      }
    }
  }
}
</style>